<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<!-- displays the navigation pane -->
</h:head>

<h:body>

	<div class="col-md-2 navi">
		<div data-spy="affix-top" data-offset-top="0" class="hidden-print" role="complementary">

			<a href="index.xhtml"><strong><h3>Home</h3></strong></a>
			<hr />

			<a href="checkout.xhtml"><strong><h3>Warenkorb</h3></strong></a>
			<hr />

			<!-- set filter on items -->
			<h:form>
				<ul class="list-unstyled">
					<li class="nav-header"><strong><h:commandLink value="Angebot" action="#{productController.ProductTiles}" styleClass="h3" style="color: #428bca;" /></strong>
						<ul class="list-unstyled">
							<li class="nav-header">
								<h4>
									&nbsp;<a href="" data-toggle="collapse" data-target="#typ">Typ</a>
								</h4>
								<ul class="list-unstyled collapse" id="typ">
									<li>&nbsp;&nbsp;<h:commandLink value="Normal" action="#{productController.ProductTilesByTypeFilter('NRM')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Flug" action="#{productController.ProductTilesByTypeFilter('FLG')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Kampf" action="#{productController.ProductTilesByTypeFilter('KMF')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Feuer" action="#{productController.ProductTilesByTypeFilter('FEU')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="K&auml;fer" action="#{productController.ProductTilesByTypeFilter('KFR')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Eis" action="#{productController.ProductTilesByTypeFilter('EIS')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Wasser" action="#{productController.ProductTilesByTypeFilter('WSR')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Gift" action="#{productController.ProductTilesByTypeFilter('GFT')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Psycho" action="#{productController.ProductTilesByTypeFilter('PSY')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Elektro" action="#{productController.ProductTilesByTypeFilter('ELK')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Gestein" action="#{productController.ProductTilesByTypeFilter('GSN')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Geist" action="#{productController.ProductTilesByTypeFilter('GEI')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Pflanze" action="#{productController.ProductTilesByTypeFilter('PFL')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Boden" action="#{productController.ProductTilesByTypeFilter('BDN')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Drache" action="#{productController.ProductTilesByTypeFilter('DRA')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Fee" action="#{productController.ProductTilesByTypeFilter('FEE')}" style="color: #428bca;" /></li>
								</ul>
							</li>
							<li class="nav-header">
								<h4>
									&nbsp;<a href="" data-toggle="collapse" data-target="#level">Level</a>
								</h4>
								<ul class="list-unstyled collapse" id="level">
									<li>&nbsp;&nbsp;<h:commandLink value="50" action="#{productController.ProductTilesByLevelFilter('50')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="100" action="#{productController.ProductTilesByLevelFilter('100')}" style="color: #428bca;" /></li>
								</ul>
							</li>
							<li class="nav-header">
								<h4>
									&nbsp;<a href="" data-toggle="collapse" data-target="#special">Besonderheiten</a>
								</h4>
								<ul class="list-unstyled collapse" id="special">
									<li>&nbsp;&nbsp;<h:commandLink value="Shiny" action="#{productController.ProductTilesBySpecialFilter('a.shiny')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Event" action="#{productController.ProductTilesBySpecialFilter('a.event')}" style="color: #428bca;" /></li>
									<li>&nbsp;&nbsp;<h:commandLink value="Legend&auml;r" action="#{productController.ProductTilesBySpecialFilter('b.legendary')}" style="color: #428bca;" /></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</h:form>
		</div>
	</div>

</h:body>
</html>
